<template>
    <el-dialog @close="onClose" :model-value="flashSessionDialogVisible" title="添加活动" width="30%" draggable>
        <el-form :model="flashSessionForm" :rules="flashRules" ref="ruleFormRef" :row-key="flashSessionForm.id">
            <el-form-item label="秒杀时间段名称" prop="name">
                <el-input placeholder="请输入秒杀时间段名称" v-model="flashSessionForm.name" class="titleInput" />
            </el-form-item>
            <el-form-item label="每日开始时间" required prop="datetime">
                <el-date-picker v-model="flashSessionForm.startTime" type="datetime" placeholder="每日请选择时间" :size="size"
                    format='HH:mm:ss' />
            </el-form-item>
            <el-form-item label="到期时间" required prop="datetime">
                <el-date-picker v-model="flashSessionForm.endTime" type="datetime" placeholder="请选择时间" :size="size"
                    format='HH:mm:ss' @change="dateChange" />
            </el-form-item>
            <el-form-item label="上线/下线">
                <el-radio-group v-model="flashSessionForm.status" :active-value="1" :inactive-value="0">
                    <el-radio :label="1">上线</el-radio>
                    <el-radio :label="0">下线</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" @click="onConfirm()">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { reactive, ref, watch } from 'vue';
import * as http from "@/request/http"
const size = ref<'default' | 'large' | 'small'>('default')
const ruleFormRef = ref<FormInstance>()

const flashSessionForm = reactive({
    name: "",
    startTime: "",
    endTime: "",
    status: 0,
    id: 0
})

const props = withDefaults(defineProps<{
    flashSessionDialogVisible: boolean, id: number, flashSessionForm: IFlashCreateParams
}>(), {
    flashSessionDialogVisible: false, id: 0, flashSessionForm: Object
})

const dateChange = () => {
    console.log(flashSessionForm.startTime);
}
watch(
    () => props.id,
    () => {
        if (props.id != 0) {
            Object.assign(flashSessionForm, props.flashSessionForm)
            console.log(flashSessionForm);

        } else {
            flashSessionForm.name = ''
            flashSessionForm.startTime = ''
            flashSessionForm.endTime = ''
        }
    }
)
const emits = defineEmits<{
    (e: "cancel"): void
    (e: "confirm"): void
}>()

const onCancel = () => {
    emits("cancel")
}
const hdAdd = () => {
    ruleFormRef.value?.validate((valid) => {
        if (valid) {
            ElMessageBox.confirm(
                '是否提交数据 ? ',
                '提示',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    http.flashSession.flashSessionCreate(flashSessionForm).then(res => {
                        if (res.code === 200) {
                            ElMessage.success("添加成功")
                            ruleFormRef.value?.resetFields()
                            emits("cancel")
                        }
                    })
                })
                .catch(() => {
                    ElMessage.error('添加失败');
                    emits("cancel")
                })
        } else {
            console.log('error submit!')
            return false
        }
    })

}
const hdEdit = () => {
    ruleFormRef.value?.validate((valid) => {
        if (valid) {
            ElMessageBox.confirm(
                '是否提交数据 ? ',
                '提示',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    http.flashSession.flashSessionUpdateByID(flashSessionForm).then(res => {
                        if (res.code === 200) {
                            ElMessage.success("修改成功")
                            ruleFormRef.value?.resetFields()
                            emits("cancel")
                        }
                    })
                })
                .catch(() => {
                    ElMessage.error('修改失败');
                    emits("cancel")
                })
        } else {
            console.log('error submit!')
            return false
        }
    }
    )

}
const onConfirm = () => {
    ruleFormRef.value?.validate((valid) => {
        if (valid) {
            props.id == 0 ? hdAdd() : hdEdit()
        } else {
            ElMessage.warning("请输入内容")
            return false
        }
    })
}

const onClose = () => {
    ruleFormRef.value?.resetFields()
    emits("cancel")
}

const flashRules = reactive<any>({
    name: [
        { required: true, message: '请输入活动标题', trigger: 'blur' },
    ],
    datetime: [
        { type: 'datetime', required: true, message: '请选择日期', trigger: 'change' },
    ],
    status: [
        { required: true, message: '请输入用户名称', trigger: 'change' },
    ],
})
</script>

<style scoped>
.titleInput {
    width: 220px;
}
</style>